<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <canvas id="mycanvas"></canvas>
    <script>
        var mycanvas = document.getElementById("mycanvas");
        mycanvas.width = 500;
        mycanvas.height = 500;
        var cvs = mycanvas.getContext("2d");
        // 左边黑圆
        cvs.arc(300, 300, 150, 0, 2 * Math.PI);
        cvs.strokeStyle = "#ccc"
        cvs.stroke();
        cvs.fillStyle = "#000";
        cvs.fill();

        // 右边白圆
        cvs.beginPath();
        cvs.arc(300, 300, 150, 1.5 * Math.PI, 0.5 * Math.PI);
        // cvs.strokeStyle="#ccc"
        cvs.stroke();
        cvs.fillStyle = "#FFF";
        cvs.fill();
        // 上边黑圆
        cvs.beginPath();
        cvs.arc(300, 225, 75, 0, 2 * Math.PI);
        cvs.strokeStyle = "#000"
        cvs.stroke();
        cvs.fillStyle = "#000";
        cvs.fill();
        // 下边白圆
        cvs.beginPath();
        cvs.arc(300, 375, 75, 0, 2 * Math.PI);
        cvs.strokeStyle = "#fff"
        cvs.stroke();
        cvs.fillStyle = "#fff";
        cvs.fill();

        //上边黑圆中的白圆
        cvs.beginPath();
        cvs.arc(300, 220, 30, 0, 2 * Math.PI);
        cvs.strokeStyle = "#fff"
        cvs.stroke();
        cvs.fillStyle = "#fff";
        cvs.fill();

         //上边白圆中的黑圆
         cvs.beginPath();
        cvs.arc(300, 375, 30, 0, 2 * Math.PI);
        cvs.strokeStyle = "#000"
        cvs.stroke();
        cvs.fillStyle = "#000";
        cvs.fill();
    </script>
</body>

</html>